<template>
  <!-- 导航栏 -->
  <navbarback></navbarback>
  <view class="viewpoint">
    <view class="top">
      <view class="left">
        <view class="image">
          <image src="../../static/images/person_3.png" mode="scaleToFill" />
        </view>
        <view class="info">
          <view style="width: 100%; margin: 0rpx 5rpx"
            ><text style="font-size: 16rpx; color: black; font-weight: bold"
              >{{ infoform.name }}
              <text style="color: #b9b9b9; font-size: 14rpx"
                >{{ infoform.age }}岁 {{ infoform.sex }}</text
              ></text
            ></view
          >
          <view class="disease_item">{{ infoform.disease }} </view>
        </view>
      </view>
      <view class="right">
        <view class="I">电话：{{ infoform.phoneNumber }}</view>
        <view class="I">地址：{{ infoform.address }}</view>
        <view class="I">身份证：{{ infoform.idNumber }}</view>
      </view>
    </view>
    <scroll-view scroll-y>
      <view class="bottom">
        <view v-if="checkItem.length != 0">
          <view @tap="clickitem(item)" class="checkitem" v-for="item in checkItem" :key="item.id">
            <text>血糖：{{ item.bloodGlucose }}mmol/L</text>
            <text>体温：{{ item.temperature }}℃</text>
            <text>脉搏：{{ item.pulseRate }}bpm</text>
            <text>血压：{{ item.bloodPressure }}mmHg</text>
            <text>体检时间：{{ formatTime(item.healthTime) }}</text>
            <text
              @tap.stop="Deletemember(item)"
              class="iconfont icon-cuowuguanbiquxiao-yuankuang"
            ></text> </view
        ></view>
        <view v-else>暂无记录</view>
      </view>
    </scroll-view>
    <view class="addVisit-button" @tap="addcheck">
      <view class="addVisit-button-inner">新增体检</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import navbarback from '@/component/navbarback2.vue'
import { getPetientCheck, deleteCheck } from '@/services/check'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { formatTime } from '@/utils/time'
const query = defineProps<{ params: any }>()
const infoform = ref()
infoform.value = JSON.parse(query.params)
const checkItem = ref<any[]>([])
const getcheckItem = async () => {
  const res = await getPetientCheck(infoform.value.id)
  checkItem.value = res.data
  checkItem.value.reverse()
}
const clickitem = (item: any) => {
  const result = Object.assign(item, infoform.value)
  uni.navigateTo({ url: `/pages/checkdetail/checkdetail?params=${JSON.stringify(result)}` })
}
const addcheck = () => {
  uni.navigateTo({ url: `/pages/addcheck/addcheck?params=${JSON.stringify(infoform.value)}` })
}
const Deletemember = async (item: any) => {
  const res = await deleteCheck(item.checkItemId)
  if (res.code == 200) {
    getcheckItem()
    uni.showToast({ icon: 'none', title: '删除成功' })
  }
}
onLoad(() => {
  getcheckItem()
})
onShow(() => {
  getcheckItem()
})
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50rpx);
  padding: 10rpx 15rpx;
  width: 100%;
  position: relative;
  .top {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    display: flex;
    padding: 5rpx;

    .left,
    .right {
      height: 100%;
      flex: 1;
    }
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      .image {
        height: 60rpx;
        width: 70rpx;
      }
      .info {
        flex: 1;
        height: 100%;
        .disease_item {
          margin: 0 5rpx;
          width: auto;
          background-color: #00a8ff;
          color: #fff;
          padding: 3rpx;
          font-weight: bold;
          border-radius: 4rpx;
          font-size: 12rpx;
        }
      }
    }
    .right {
      .I {
        margin: 4rpx 0;
        font-size: 14rpx;
        font-weight: bold;
        color: #b5b2b2;
      }
    }
  }
  .bottom {
    width: 100%;
    flex: 1;
    .checkitem {
      height: 40rpx;
      background-color: #fff;
      margin-top: 5rpx;
      text-align: center;
      line-height: 40rpx;
      display: flex;
      justify-content: space-around;
      font-size: 13rpx;
    }
  }
  .addVisit-button {
    position: absolute;
    right: 35rpx;
    bottom: 30rpx;
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    background-color: #06d9f5;
    background: #fff radial-gradient(#06dbf5, #02abf3);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    .addVisit-button-inner {
      width: 32rpx;
      height: 32rpx;
      font-size: 12rpx;
      color: #fff;
    }
  }
}
</style>